<template>
  <div class="inventoryList auditCmpt">
    <!-- 查询表单 -->
    <div class="form-baseinfo">
      <LPSearchBar
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>
    <div class="form-baseinfo">
      <div class="btn_area">
        <el-button
          v-hasPermi="['LaborProtection.APICostOrgRelation.Create']"
          size="medium"
          type="primary"
          @click="insetrButton"
          >新增</el-button
        >
      </div>
      <!-- 表格列表 -->
      <LPTablePage
        :show-indexfixed="false"
        index-label="序号"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        align="center"
        class="table"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template slot="cz" slot-scope="{ row }">
          <el-button
            v-hasPermi="['LaborProtection.APICostOrgRelation.Update']"
            type="text"
            @click="handColumnClick(row, 'update')"
            >修改</el-button
          >
          <el-button
            v-hasPermi="['LaborProtection.APICostOrgRelation.Delete']"
            type="text"
            @click="handColumnClick(row, 'delete')"
            >删除</el-button
          >
        </template>
      </LPTablePage>
    </div>
  </div>
</template>

<script>
import { getCostOrgRelation, deleteCostOrgRelation } from '@/api/LaborProtection/costOrgRelation'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  components: { LPTablePage, LPSearchBar },
  data() {
    return {
      searchModel: {},
      searchData: [
        {
          label: '',
          placeholder: '成本名称',
          prop: 'CostName'
        },
        {
          label: '',
          placeholder: '部门名称',
          prop: 'OrgName'
        }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: 'erp成本ID', prop: 'costId' },
        { label: 'erp成本名称', prop: 'costName' },
        { label: '部门ID', prop: 'orgId' },
        { label: '部门名称', prop: 'orgName' },
        { label: '操作', prop: 'cz', render: true }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    // 获取列表
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      getCostOrgRelation(params).then((res) => {
        if (!res.error) {
          this.tableData = res.items
          this.total = res.totalCount
        }
      })
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    },
    insetrButton() {
      this.$router.push({
        path: '/costOrgRelation/insertOrupdateCost'
      })
    },
    handColumnClick(row, name) {
      if (name == 'update') {
        this.$router.push({
          path: '/costOrgRelation/insertOrupdateCost',
          query: {
            id: row.id
          }
        })
      } else if (name == 'delete') {
        this.$confirm('该操作将删除该条数据,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteCostOrgRelation(row.id).then((res) => {
              this.$message.success('删除成功')
              this.getList()
            })
          })
          .catch(() => {
            this.$message.info('已取消该操作')
          })
      }
    }
  }
}
</script>

<style lang="scss">
.el-form-item__label {
  font-weight: normal;
}

.el-dialog__body {
  padding-top: 0px;
}

.el-divider {
  margin-top: 5px;
}
</style>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
}
.btn_area {
  background-color: #fff;
  padding: 0.2rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.inventoryList {
  .form-baseinfo {
    ::v-deep .search-bar input.el-input__inner {
      width: 1.6rem;
    }
  }

  ::v-deep .table {
    .red {
      color: $high_risk_color;
    }
  }
}
</style>
